<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>


        <style>
            .cont {
                margin: 50px auto;
            }

            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }

            body {
                /*background: url("../img1/register_bg.png") no-repeat center;*/
                padding-top: 25px;
            }

            .rg_layout {
                width: 900px;
                height: 500px;
                border-radius: 4px;
                /*background: url("../img1/bg.jpg");*/
                /*让div水平居中*/
                margin: auto;
            }

            .rg_left {
                /*border: 1px solid red;*/
                float: left;
                margin-left: 25px;
                margin-top: 25px;
            }

            .rg_left>p:first-child {
                color: #ff9a26;
                font-size: 20px;
            }

            .rg_left>p:last-child {
                color: #A6A6A6;
                font-size: 20px;

            }

            .rg_center {
                float: left;
                margin-top: 30px;
                /* border: 1px solid red;*/

            }

            .rg_right {
                /*border: 1px solid red;*/
                float: right;
                margin: 15px;
            }

            .rg_right>p:first-child {
                font-size: 15px;

            }

            .rg_right p a {
                color: rgb(97, 57, 221);
            }

            .td_left {
                width: 100px;
                text-align: right;
                height: 45px;
            }

            .td_right {
                padding-left: 50px;
            }

            #username,
            #password,
            #email,
            #name,
            #tel,
            #birthday,
            #checkcode {
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6;
                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }

            #checkcode {
                width: 110px;
            }

            #img_check {
                height: 32px;
                vertical-align: middle;
            }

            #btn_sub {
                width: 150px;
                height: 40px;
                border-radius: 4px;
                margin-top: 10px;
                background-color: #FFD026;
                border: 1px solid #FFD026;
            }

            #td_sub {
                padding-left: 150px;
            }

            .error {
                color: red;
                vertical-align: middle;
                font-size: 1px;
            }

            body {

                position: fixed;
                top: 0;
                left: 0;
                width: 80%;
                height: 80%;
                min-width: 1438px;
                /* z-index: -10; */
                /* zoom: 1; */
                background-color: #fff;
                /*background: url(2.png);*/
                /* background-repeat: no-repeat; */
                /* background-size: cover; */
                /* -webkit-background-size: cover; */
                -o-background-size: cover;
                /* background-position: center 0; */
                background-image: url(https://img.dowebok.com/8457.png);

            }
        </style>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


        <script>
            $(function () {
                var errMsg;
                $.each($("input"), function (i, val) {
                    $(val).blur(function () {
                        if ($(val).attr("name") == "user_n") {
                            $(".userMsg").remove();
                            var user_n = val.value;
                            var regName = /[\u4e00-\u9fa5]{2,6}/
                            if (user_n == "" || user_n.trim() == "") {
                                errMsg = "<span  class='userMsg' style='color:red;'>昵称不能为空</span>";
                            } else if (!regName.test(user_n)) {
                                errMsg = "<span class='userMsg' style='color:red;'>由2-6个汉字组成</span>";
                            } else {
                                errMsg = "<span  class='userMsg' style='color:red;'>OK！</span>";
                            }
                            $(this).parent().append(errMsg);
                        } else if ($(val).attr("name") == "user_p") {
                            $(".user_pMsg").remove();
                            var user_p = val.value;
                            var reguser_p = /^\w{4,10}$/;
                            if (user_p == "" || user_p.trim() == "") {
                                errMsg = "<span id='user_pMsg' class='user_pMsg' style='color:red;'>密码不能为空</span>";
                            } else if (!reguser_p.test(user_p)) {
                                errMsg = "<span class='user_pMsg' style='color:red;'>格式错误</span>";
                            } else {
                                errMsg = "<span class='user_pMsg' style='color:red;'>OK！</span>";
                            }
                            $(this).parent().append(errMsg);
                        } else if ($(val).attr("name") == "user_rp") {
                            $(".user_rpMsg").remove();
                            var user_rp = val.value;
                            var pwd = $("input")[3].value;
                            if (user_rp == "" || user_rp.trim() == "" || !user_rp.equals(user_p)) {
                                errMsg = "<span class='user_rpMsg' style='color:red;'>两次输入密码不一致</span>";
                            } else {
                                errMsg = "<span class='user_rpMsg' style='color:red;'>OK！</span>";
                            }
                            $(this).parent().append(errMsg);
                        } else if ($(val).attr("name") == "user_tel") {
                            $(".user_telMsg").remove();
                            var user_tel = val.value;
                            var reguser_tel = /[13,15,18]\d{9}/;
                            if (user_tel == "" || user_tel.trim() == "") {
                                errMsg = "<span class = 'user_telMsg' style = 'color:red;' > 手机号不能为空 "
                            } else if (!reguser_tel.test(user_tel)) {
                                errMsg = "<span class = 'user_telMsg' style = 'color:red;' > 格式错误 < /span>"
                            } else {
                                errMsg = "<span class = 'user_telMsg' style = 'color:red;' > OK！ < /span>"
                            }
                            $(this).parent().append(errMsg);
                        }
                    });
                });
            });

        </script>

    </head>

    <body>

        <div class="rg_layout">
            <!--    页面左部分-->
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>

            </div>
            <!--页面中间部分-->
            <div class="rg_center">
                <div class="rg_form ">
                    <!--定义表单 form-->

                    <form action="${pageContext.request.contextPath}/Submit" method="post">
                        <table>
                            <!--                    用户名-->
                            <tr>
                                <td class="td_left"><label for="user_n">用户名</label></td>
                                <td class="td_right">
                                    <input type="text" name="user_n" id="user_n" placeholder="设置用户名">
                                    <span id="s_username" class="error"></span>
                                </td>

                            </tr>
                            <!--                    密码-->

                            <tr>
                                <td class="td_left"><label for="user_p">密码</label></td>
                                <td class="td_right">
                                    <input type="password" name="user_p" id="user_p" placeholder="请输入密码">

                                </td>
                            </tr>

                            <!--                   确认 密码-->

                            <tr>
                                <td class="td_left"><label for="user_rp">密码</label></td>
                                <td class="td_right">
                                    <input type="password" name="user_rp" id="user_rp" placeholder="请确认密码">

                                </td>
                            </tr>


                            <!--手机号-->
                            <tr>
                                <td class="td_left"><label for="user_tel">手机号</label></td>
                                <td class="td_right">
                                    <input type="text" name="user_tel" id="user_tel" placeholder="请输入手机号">

                                </td>
                            </tr>


                            <!--注册按钮-->
                            <tr>
                                <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>

                            </tr>

                        </table>
                        <span>${requestScope.info}</span>

                    </form>




                </div>
            </div>
            <!--页面右部分-->
            <div class="rg_right">
                <p>已有账号?<a href="#">立即登录</a></p>
            </div>
        </div>

    </body>

    </html>